<template>
  <div>
    <router-view :class="[mode]" />
    <t-loading
      :loading="$store.state.setting.loading"
      attach="body"
      fullscreen
      indicator
      preventScrollThrough
      showOverlay
    />
  </div>
</template>

<script>
import Vue from 'vue';
import config from '@/config/style';

export default Vue.extend({
  computed: {
    mode() {
      return this.$store.getters['setting/mode'];
    },
  },
  created() {
    // eslint-disable-next-line func-names, no-extend-native
    Date.prototype.format = function (fmt) {
      const o = {
        'M+': this.getMonth() + 1, // 月份
        'd+': this.getDate(), // 日
        'h+': this.getHours(), // 小时
        'm+': this.getMinutes(), // 分
        's+': this.getSeconds(), // 秒
        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
        S: this.getMilliseconds(), // 毫秒
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, `${this.getFullYear()}`.substr(4 - RegExp.$1.length));
      // eslint-disable-next-line no-var, no-restricted-syntax
      for (const k in o) {
        if (new RegExp(`(${k})`).test(fmt))
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length));
      }
      return fmt;
    };
  },
  mounted() {
    this.$store.dispatch('setting/changeTheme', { ...config });
  },
});
</script>
<style lang="less">
/deep/.t-icon .t-icon-error-circle-filled {
  margin-bottom: 100px !important;
}
/deep/.t-message .t-is-warning .t-is-closable {
  background-color: red !important;
}
</style>
